<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iHome智能家居 - 注册</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="container">
    <header>
        <h1>欢迎来到iHome智能家居</h1>
        <p class="subtitle">安全接入您的智能家居生态系统</p>
    </header>

    <main>
        <div class="login-tabs">
            <div class="tab active" data-tab="phone">手机注册</div>
            <div class="tab" data-tab="password">密码注册</div>
            <div class="tab" data-tab="email">邮箱注册</div>
        </div>

        <div class="login-forms">
            <!-- 手机注册表单 -->
            <form id="phone-register" class="login-form active">
                <div class="input-group">
                    <input type="tel" id="register-phone" placeholder="请输入手机号" required>
                </div>
                <div class="input-group code-group">
                    <input type="text" id="register-phone-code" placeholder="请输入验证码" required>
                    <button type="button" class="get-code-btn" id="get-register-phone-code">获取验证码</button>
                </div>
                <button type="submit" class="login-btn">注册</button>
            </form>

            <!-- 密码注册表单 -->
            <form id="password-register" class="login-form">
                <div class="input-group">
                    <input type="text" id="register-username" placeholder="请输入用户名" required>
                </div>
                <div class="input-group">
                    <input type="password" id="register-password" placeholder="请设置密码" required>
                </div>
                <div class="input-group">
                    <input type="tel" id="register-password-phone" placeholder="请输入手机号(可选)">
                </div>
                <div class="input-group">
                    <input type="email" id="register-password-email" placeholder="请输入邮箱(可选)">
                </div>
                <button type="submit" class="login-btn">注册</button>
            </form>

            <!-- 邮箱注册表单 -->
            <form id="email-register" class="login-form">
                <div class="input-group">
                    <input type="email" id="register-email" placeholder="请输入邮箱" required>
                </div>
                <div class="input-group code-group">
                    <input type="text" id="register-email-code" placeholder="请输入验证码" required>
                    <button type="button" class="get-code-btn" id="get-register-email-code">获取验证码</button>
                </div>
                <button type="submit" class="login-btn">注册</button>
            </form>
        </div>

        <div class="switch-page">
            <p>已有账号？<a href="index.html">立即登录</a></p>
        </div>
    </main>
</div>

<script src="../js/config.js"></script>
<script src="../js/register.js"></script>
</body>
</html>